<template>
  <div class="page">
    <headerbar>修改密码</headerbar>
      <div class="pdv-3"></div>
    <div class="pdh-4">
      <div class="input-column-wrap">
        <div class="input-wrap">
          <input v-model="oldPwd" type="password" placeholder="请输入原密码">
        </div>
      </div>
      <div class="input-column-wrap">
        <div class="input-wrap">
          <input v-model="newPwd" type="password" placeholder="请输入新密码（8-18位字母+数字+特殊符号组合）">
        </div>
      </div>
      <div class="input-column-wrap">
        <div class="input-wrap">
          <input v-model="confirmPwd" type="password" placeholder="请再次输入密码">
        </div>
      </div>

      <div class="pdv-3"></div>
      <div @click="save()" class="default-block-btn mgh-2">确认修改</div>
     <!-- <div class="">
        <div class="">
          <ul class="mui-table-view">
            <li class="mui-table-view-cell list-item">
              原密码：
              <span class="mine-lists-content mui-pull-right">
									<input autocomplete="false" class="setup-input" type="password" v-model="oldPwd" placeholder="请输入原密码" value="" /></span>
            </li>
            <li class="mui-table-view-cell list-item">
              新密码<span class="mine-lists-content mui-pull-right">
									<input autocomplete="false" class="setup-input" type="password" v-model="newPwd" placeholder="请输入新密码" value="" /></span>
            </li>
            <li class="mui-table-view-cell list-item">
              确认密码<span class="mine-lists-content mui-pull-right">
									<input autocomplete="false" class="setup-input" type="password" v-model="confirmPwd" placeholder="请输入新密码" value="" /></span>
            </li>
          </ul>
          <div class="pdv-3"></div>
          <div @click="save()" class="default-block-btn mgh-2">确认修改</div>
        </div>
      </div>-->
    </div>
  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import api from '@/common/config/api'
  import loginService from '@/service/loginService'
  export default {
    name: '',
    data () {
      return {
        fn: tools,
        oldPwd: '',
        newPwd: '',
        confirmPwd: '',
        userInfo: {}
      }
    },
    created () {
      this.userInfo = this.$localStorage.get('userInfo')
    },
    methods: {
      save () {
        // if (this.newPwd.length < 8) {
        //   return tools.alert('长度必须在8-20位之间')
        // }
        // if (/^(?![0-9]+$)(?![a-zA-Z]+$)/.test(this.newPwd) === false) {
        //   return tools.alert('密码必须包含数字和字母')
        // }
        if (this.oldPwdP === '') {
          return tools.alert('请输入原密码')
        }
        if (this.newPwd === '') {
          return tools.alert('请输入新密码')
        }
        if (this.confirmPwd === '') {
          return tools.alert('请输入新密码')
        }
        if (this.newPwd !== this.confirmPwd) {
          return tools.alert('两次密码不一致')
        }
        let data = {
          userId: this.userInfo.id,
          newPassword: this.newPwd,
          oldPassword: this.oldPwd
        }
        loginService.passwords(data).then((res) => {
          if (res.code === 0) {
            tools.tip(res.message||'密码修改成功！');
            setTimeout(()=>{
              this.loginOut()
            },1000);

          } else {
            // this.loginOut()
            tools.alert(res.message);
          }
        })
      },
      loginOut () {
        this.$localStorage.set('password',this.newPwd);
        this.$localStorage.set('forgetPwd',this.newPwd);
        this.$localStorage.remove('userInfo');
        this.$router.replace({name: 'login'})
      }
    }
  }
</script>

<style scoped lang="scss">
  .setup-input {
    height: 50px !important;
  }
  .mui-table-view {
    font-size:14PX;
    .mui-table-view-cell {
      padding:15px 30px;
    }
  }
</style>
